<template>
  <div>
    <div style="text-align: right">
      <el-date-picker
        v-model="timevalue"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </div>
    <el-table
      :data="getPerPageData()"
      stripe
      style="width: 100%"
      max-height="500"
    >
      <el-table-column prop="time" label="采集时间" fixed="left" width="180">
      </el-table-column>
      <el-table-column prop="command" label="通讯控制命令"> </el-table-column>
      <el-table-column prop="address" label="通讯设定频率值地址">
      </el-table-column>
      <el-table-column prop="pidaddress" label="PID设定地址"> </el-table-column>
      <el-table-column prop="pidfeedaddress" label="PID反馈地址">
      </el-table-column>
      <el-table-column prop="rate" label="运行频率"> </el-table-column>
      <el-table-column prop="outputrate" label="输出功率"> </el-table-column>
      <el-table-column prop="pidselect" label="PID给定值"> </el-table-column>
      <el-table-column prop="pidfeed" label="PID反馈值"> </el-table-column>
      <el-table-column prop="transducerstatus" label="变频器状态">
      </el-table-column>
      <el-table-column prop="cflow" label="瞬时流量"> </el-table-column>
      <el-table-column prop="stemp" label="压差/环境温度"> </el-table-column>
      <el-table-column prop="pressure" label="压力"> </el-table-column>
      <el-table-column prop="electricpower" label="电功率" width="100">
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="limit"
        layout="sizes, prev, pager, next"
        :total="generateTableData().length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
const time = require("@/tool/time");
export default {
  data() {
    return {
      timevalue: "",
      columns: [
        {
          label: "蒸汽供压力",
          value: "pressure",
          selected: true,
        },
        {
          label: "蒸汽供压力",
          value: "pressure",
          selected: true,
        },
        {
          label: "蒸汽供瞬时流量",
          value: "steamcflow",
          selected: true,
        },
        {
          label: "给水瞬时流量",
          value: "watercflow",
          selected: true,
        },
        {
          label: "给水出口压力",
          value: "wateropresssure",
          selected: true,
        },
        {
          label: "引风机电流",
          value: "fancurrent",
          selected: true,
        },
        {
          label: "鼓风机电流",
          value: "fanpower",
          selected: true,
        },
        {
          label: "管煤气进口风温",
          value: "gaswindtemp",
          selected: true,
        },
        {
          label: "管煤气进水温度",
          value: "gaswatertemp",
          selected: true,
        },
        {
          label: "炉膛燃烧温度",
          value: "firetemp",
          selected: true,
        },
        {
          label: "管煤气给水入温度",
          value: "gaswatertemp",
          selected: true,
        },
        {
          label: "管煤气进水压力",
          value: "gaswaterpressure",
          selected: true,
        },
        {
          label: "引风机运行频率",
          value: "ifanrunrate",
          selected: true,
        },
        {
          label: "鼓风机运行频率",
          value: "fanrunrate",
          selected: true,
        },
        {
          label: "给水泵运行频率",
          value: "waterrunrate",
          selected: true,
        },
        {
          label: "锅炉给水液位",
          value: "boilerwaterstage",
          selected: true,
        },
        {
          label: "给水泵压差运行上限",
          value: "waterupperlimit",
          selected: true,
        },
        {
          label: "给水泵压差运行下限",
          value: "waterlowerlimit",
          selected: true,
        },
        {
          label: "给水累计流量",
          value: "watersflow",
          selected: true,
        },
        {
          label: "蒸汽供累计流量",
          value: "gassflow",
          selected: true,
        },
        {
          label: "锅炉总用电量",
          value: "boilerspower",
          selected: true,
        },
        {
          label: "锅炉有功电量",
          value: "boilerusefulpower",
          selected: true,
        },
        {
          label: "锅炉无功电量",
          value: "boileruselesspower",
          selected: true,
        },
        {
          label: "急停按钮",
          value: "emergencybtn",
          selected: true,
        },
        {
          label: "引风机变频运行信号",
          value: "ifantransducersign",
          selected: true,
        },
        {
          label: "鼓风机变频运行信号",
          value: "fantransducersign",
          selected: true,
        },
        {
          label: "给水泵变频运行信号",
          value: "watertransducersign",
          selected: true,
        },
        {
          label: "引风机变频故障信号",
          value: "ifantransducererrorsign",
          selected: true,
        },
        {
          label: "鼓风机变频故障信号",
          value: "fantransducererrorsign",
          selected: true,
        },
        {
          label: "给水泵变频故障信号",
          value: "watertransducererrorsign",
          selected: true,
        },
        {
          label: "给水泵液位低水位",
          value: "waterstagelower",
          selected: true,
        },
        {
          label: "给水泵液位高水位",
          value: "waterstageupper",
          selected: true,
        },
        {
          label: "水位处于危低水位",
          value: "waterlower",
          selected: true,
        },
        {
          label: "引风机变频器故障",
          value: "fantransducererror",
          selected: true,
        },
        // {
        //   label: '变频选择按钮',
        //   value: 'transducerbtn',
        //   selected: true
        // },
        // {
        //   label: '工频选择按钮',
        //   value: 'powerfrequencybtn',
        //   selected: true
        // },
        // {
        //   label: '手动选择按钮',
        //   value: 'manualbtn',
        //   selected: true
        // },
        // {
        //   label: '自动选择按钮',
        //   value: 'autobtn',
        //   selected: true
        // },
        // {
        //   label: '引风机启动按钮',
        //   value: 'ifanstartbtn',
        //   selected: true
        // },
        // {
        //   label: '引风机停止按钮',
        //   value: 'ifanstopbtn',
        //   selected: true
        // },
        // {
        //   label: '鼓风机启动按钮',
        //   value: 'fanstartbtn',
        //   selected: true
        // },
        // {
        //   label: '鼓风机停止按钮',
        //   value: 'fanstopbtn',
        //   selected: true
        // },
        // {
        //   label: '给水泵启动按钮',
        //   value: 'waterstartbtn',
        //   selected: true
        // },
        // {
        //   label: '给水泵停止按钮',
        //   value: 'waterstopbtn',
        //   selected: true
        // },
      ],
      tableData: [
        {
          time: "",
          command: "",
          address: "",
          pidaddress: "",
          pidfeedaddress: "",
          rate: "",
          outputrate: "",
          pidselect: "",
          pidfeed: "",
          transducerstatus: "",
          cflow: "",
          stemp: "",
          pressure: "",
          electricpower: "",
        },
      ],
      currentPage: 1,
      limit: 10,
    };
  },
  methods: {
    generateTableData() {
      let date = new Date().getTime() - 10000000000;
      let arr = [];
      for (let i = 0; i < 99; i++) {
        let time = new Date(date - parseInt(Math.random() * 100000)).format(
          "yyyy-MM-dd hh:mm:ss"
        );
        let command = 0;
        let order = 0;
        let pidaddress = 5556.9;
        let pidfeedaddress = 11.0;
        let rate = 21;
        let outputrate = 26;
        let pidselect = 25.2;
        let pidfeed = 25.7;
        let transducerstatus = 1;
        let cflow = (1000 + Math.random() * 1000).toFixed(1);
        let stemp = (Math.random() * 100).toFixed(1);
        let pressure = (0.6 + Math.random()).toFixed(4);
        let electricpower = (100 + Math.random() * 100).toFixed(4);
        arr.push({
          time,
          command,
          order,
          pidaddress,
          pidfeedaddress,
          rate,
          outputrate,
          pidselect,
          pidfeed,
          transducerstatus,
          cflow,
          stemp,
          pressure,
          electricpower,
        });
      }
      return arr;
    },
    getPerPageData() {
      let limit = this.$data.limit;
      let page = this.$data.currentPage;

      return this.generateTableData()
        .filter((x) => {
          let date = time.parseDate(x.time, "yyyy-MM-dd hh:mm:ss");
          if (this.$data.timevalue) {
            if (
              this.$data.timevalue[0] < date &&
              date < this.$data.timevalue[1]
            )
              return x;
          } else {
            return x;
          }
        })
        .slice((page - 1) * limit, (page - 1) * limit + limit);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.$data.limit = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$data.currentPage = val;
    },
  },
};
</script>

<style scoped>
.block {
  text-align: center;
}
</style>